<template>
    <div class="box">
        <!-- 头部 -->
        <div class="top" @click="onClickLeft">
            <span>
                <van-icon name="arrow-left" />
                返回
            </span>
            <h3>我的作品</h3>
        </div>

        <!-- 列表内容 -->
        <div class="content">
            <van-row v-for="ios in list" style="border-bottom:2px black solid" :key="ios._id">
                <van-col span="24" class="clo111" style="text-indent:2em" @click="$router.push({
                    path: '/detail',
                    query: {
                        id: ios._id,
                        title: ios.title
                    }
                })">{{ ios.title }}</van-col>

                <!-- 图片 -->
                <div :class="{
                    none: ios.imageSrc.length == 0,
                    nones: ios.imageSrc.length == 1,
                    more: ios.imageSrc.length == 2,
                    mores: ios.imageSrc.length == 3
                }" @click="$router.push({
                        path: '/detail',
                        query: {
                        id: ios._id,
                        title: ios.title
                                }
                          })">
                    <img v-for="(ios, index) in ios.imageSrc" :key="index" v-lazy="ios" :src="ios">
                </div>

                <!-- 信息 -->
                <div style="padding-left:5%;margin-bottom: 50px;">
                    <van-col span="12" class="col333">作者：{{ ios.author }}</van-col>
                    <van-col span="10" class="col333">时间：{{ ios.time | formatDate }}</van-col>
                </div>

                <!-- 删除作品 -->
                <p @click="deletes(ios._id)">删除该作品</p>
            </van-row>
        </div>
    </div>
</template>

<script>
import { mapState } from 'vuex';
import { Dialog } from 'vant';
// 接口
import { MyPublish, DeletePublish } from '@/api/api';
export default {
    components: {
        [Dialog.name]: Dialog
    },
    data() {
        return {
            list: [], //文章数组
            pID: '',   //发布文章id
        }
    },
    created() {
        this.me()
    },
    computed: {
        ...mapState(["uid"])
    },
    methods: {
        // 点击跳转返回路由
        onClickLeft() {
            setTimeout(() => {
                this.$router.push('geren')
            }, 100);
        },
        // 发布列表
        me() {
            let { uid: uid } = this;
            MyPublish({
                uid,
                skip: 0,
                limit: 100
            }).then(res => {
                console.log(res)
                this.list = res.data.data
            })
        },

        // // 删除文章
        deletes(e) {
            this.pID = e;
            let { uid: uid } = this;
            DeletePublish({
                _id: this.pID,
                uid
            }).then(res => {
                console.log(res);
                if (res.data.code == 0) {
                    Dialog({ message: res.data.msg });
                    this.me()  //删除成功后重新调用 实现刷新页面
                }
            })
        }
    },
    // 时间戳转换年月日
    filters: {
        formatDate: function (value) {
            let date = new Date(value);
            let y = date.getFullYear();
            let MM = date.getMonth() + 1;
            MM = MM < 10 ? "0" + MM : MM;
            let d = date.getDate();
            d = d < 10 ? "0" + d : d;
            // let h = date.getHours();
            // h = h < 10 ? "0" + h : h;
            // let m = date.getMinutes();
            // m = m < 10 ? "0" + m : m;
            return y + "-" + MM + "-" + d;
            // return y + "-" + MM + "-" + d + " " + h + ":" + m;
        }
    },


}
</script>

<style scoped  lang="less">
.box {
    width: 100%;
    height: 100%;
    // background-image: url(../../../public/img/bj5.jpg);
}

.van-col {
    box-sizing: border-box;
    min-height: 1px;
    overflow: hidden;
    word-wrap: break-word;
    display: flex;
    margin: 15px 0 10px 0;
}


::v-deep .van-tabs__line {
    position: absolute;
    bottom: 6.5vw;
    left: 0;
    z-index: 1;
    width: 4.66667vw;
    height: 0.8vw;
    border-radius: 0.8vw;
}

// 头部
.top {
    max-width: 100%;
    height: 55px;
    background-color: #3399ff;
}

.top span {
    float: left;
    line-height: 55px;
    margin-left: 10px;
    color: white;
}

.top h3 {
    color: white;
    text-align: center;
    line-height: 55px;
    margin-top: 0;
    margin-right: 35px;
}

//图片
.content {
    overflow: hidden;

    p {
        float: right;
        color: rgb(228, 153, 153);
    }

    img {
        max-width: 100%;
    }

    .none img {
        display: none;
    }

    .nones {
        width: 100%;
    }

    .nones img {
        width: 100%;
    }

    .more img {
        width: 47%;
        height: 150px;
        padding-left: 10px;
        margin-top: 10px;
    }

    .mores img {
        width: 32%;
        padding-left: 4px;
        height: 100px;
    }
}
</style>